<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
        <link
            rel="stylesheet"
            href="//unpkg.com/layui@2.6.8/dist/css/layui.css"
        />
        <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
        <title>Document</title>
    </head>
    <body>
        <input
            type="text"
            name="price_min"
            placeholder="输入商品名进行搜索"
            autocomplete="off"
            class="layui-input"
            style="width: 100%"
            id="search"
            onkeyup="search()"
        />
        <button class="layui-btn layui-btn-normal" onclick="show()">
            +添加商品
        </button>

        <div id="box">
            <div class="layui-form-item">
                <label class="layui-form-label">商品名称</label>
                <div class="layui-input-block">
                    <input
                        type="text"
                        name="title"
                        required
                        lay-verify="required"
                        placeholder="请输入商品名称"
                        autocomplete="off"
                        class="layui-input"
                        id="name"
                    />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品价格</label>
                <div class="layui-input-block">
                    <input
                        type="text"
                        name="title"
                        required
                        lay-verify="required"
                        placeholder="请输入商品价格"
                        autocomplete="off"
                        class="layui-input"
                        id="price"
                    />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品库存</label>
                <div class="layui-input-block">
                    <input
                        type="text"
                        name="title"
                        required
                        lay-verify="required"
                        placeholder="请输入商品库存"
                        autocomplete="off"
                        class="layui-input"
                        id="stock"
                    />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品销量</label>
                <div class="layui-input-block">
                    <input
                        type="text"
                        name="title"
                        required
                        lay-verify="required"
                        placeholder="请输入商品销量"
                        autocomplete="off"
                        class="layui-input"
                        id="sold"
                    />
                </div>
            </div>
            <div style="width: 205px; height: 40px; margin: auto">
                <button class="layui-btn layui-btn-primary" onclick="curtain()">
                    取消添加
                </button>
                <button class="layui-btn layui-btn-primary" onclick="add()">
                    确认提交
                </button>
            </div>
        </div>
        <div style="width: 100%; height: 630px; overflow-y: scroll">
            <table class="layui-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>商品</th>
                        <th onclick="productSort(1)"><a href="#">价格</a></th>
                        <th onclick="productSort(2)"><a href="#">库存</a></th>
                        <th onclick="productSort(3)">
                            <a href="#">实际销量</a>
                        </th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>

        <button class="layui-btn layui-btn-primary" onclick="left()">👈</button>
        <span>这是第<i style="font-size: 20px"></i>页</span>
        <button class="layui-btn layui-btn-primary" onclick="right()">
            👉
        </button>

        <div id="detailed"></div>
        <div id="curtain" onclick="curtain()"></div>
    </body>
    <script>
        //获取页数--第几页
        var pages = 1;
        //每页显示多少条
        var limits = 10;
        //所有总数据
        var arrData = [];
        //修改时触发----存储下标
        var index = null;
        //用来判断是修改还是添加
        var num = 1;
        //分也时用来判断是不是排序
        var numss = "true";
        // 页面加载事件
        $(function () {
            //调用分页
            Pagination();
        });

        //分页事件
        function Pagination() {
            //调用接口对数据进行分页
            $.ajax({
                type: "get",
                url: `https://liu.zzgoodqc.cn/goods/listByPage?page=${pages}&&limit=${limits}`,
                success: function (res) {
                    let data = JSON.parse(res);
                    arrData = data.data;
                    pagey(arrData);
                    $("i").html(pages);
                },
            });
        }

        //用来显示添加商品
        function show() {
            //幕布显示
            $("#curtain").show();
            // div显示
            $("#box").show();
        }

        function curtain() {
            $("#name").val("");
            $("#stock").val("");
            $("#price").val("");
            $("#sold").val("");
            curtain();
        }

        //页面数据渲染---data数据 -----htmls渲染到那个里面，默认是‘tbody’
        function pagey(data, htmls = "tbody") {
            var html = "";
            //遍历数据
            for (let i in data) {
                html += `<tr>
                            <td>${data[i].id}</td>
                            <td>${data[i].goods_name}</td>
                            <td>${data[i].price}</td>
                            <td>${data[i].stock}</td>
                            <td>${data[i].sold}</td>
                            <td>${data[i].created_at}</td>
                            <td>
                                <button class="layui-btn layui-btn-primary" onclick="dele(${data[i].id})">删除</button>
                                <button class="layui-btn layui-btn-primary" onclick="revise(${i})">修改</button>
                                <button class="layui-btn layui-btn-primary" onclick="detail(${data[i].id})">详情</button>
                            </td>
                        </tr>`;
            }
            //渲染页面
            $(htmls).html(html);
        }

        //左箭头点击
        function left() {
            //数字不等于1 就执行减减
            if (pages != 1) {
                // 等于true是没有点击排序，false就是点击了排序
                if (numss == "true") {
                    pages--;
                    Pagination();
                    pagey();
                } else if (numss == "false") {
                    pages--;
                    productSort();
                    pagey();
                }
            } else {
                layer.open({
                    title: "提示",
                    content: "已经到达第一页",
                });
            }
        }

        //右箭头点击----事件操作同上
        function right() {
            if (arrData.length < limits) {
                layer.open({
                    title: "提示",
                    content: "已经到达最后一页了",
                });
                return;
            }
            if (numss == "true") {
                pages++;
                Pagination();
                pagey();
            } else if (numss == "false") {
                pages++;
                productSort();
                pagey();
            }
        }

        //添加数据
        function add() {
            //当num等于1时证明是添加等于二就是修改
            if (num == 1) {
                //请求数据链接
                $.ajax({
                    type: "post",
                    url: "https://liu.zzgoodqc.cn/goods/add",
                    data: {
                        goods_name: $("#name").val(),
                        stock: $("#stock").val(),
                        price: $("#price").val(),
                        status: 1,
                        sold: $("#sold").val(),
                        img: "https://pic2.zhimg.com/v2-579a1137afd4fba5bdb6bdb7591e8400_r.jpg?source=1940ef5c",
                    },
                    dataType: "json",
                    // 渲染页面
                    success: function (res) {
                        layer.open({
                            title: "提示",
                            content: res.msg,
                        });
                        Pagination();
                        pagey();
                    },
                });
                curtain();
                //修改
            } else if (num == 2) {
                //请求连接
                $.ajax({
                    type: "post",
                    url: `https://liu.zzgoodqc.cn/goods/update`,
                    data: {
                        id: arrData[index].id,
                        goods_name: $("#name").val(),
                        stock: $("#stock").val(),
                        price: $("#price").val(),
                        status: 1,
                        sold: $("#sold").val(),
                        img: "https://pic2.zhimg.com/v2-579a1137afd4fba5bdb6bdb7591e8400_r.jpg?source=1940ef5c",
                    },
                    //渲染页面
                    success: function (res) {
                        layer.open({
                            title: "提示",
                            content: res.msg,
                        });
                        Pagination();
                        pagey();
                    },
                });
                curtain();
            }
        }

        //删除数据
        function dele(id) {
            //请求数据
            $.ajax({
                type: "GET",
                url: `https://liu.zzgoodqc.cn/goods/delete?id=${id}`,
                //渲染页面，提示信息
                success: function (res) {
                    layer.open({
                        title: "提示",
                        content: "已删除完成",
                    });
                    Pagination();
                    pagey();
                },
            });
        }

        //修改事件
        function revise(i) {
            $("#curtain").show();
            $("#box").show();
            $("#name").val(arrData[i].goods_name);
            $("#stock").val(arrData[i].stock);
            $("#price").val(arrData[i].price);
            $("#sold").val(arrData[i].sold);
            //下标存储
            index = i;
            //让上面知道该修改了
            num = 2;
        }

        //详情查看---直接传id
        function detail(id) {
            // 请求数据
            $.ajax({
                type: "GET",
                url: `https://liu.zzgoodqc.cn/goods/detail?id=${id}`,
                //渲染页面
                success: function (res) {
                    let data = JSON.parse(res);
                    let detailed = data.data;
                    //因为是对象格式、不用循环直接渲染
                    let html = `
                                <div>ID:${detailed.id}</div>
                                <div>商品样式：<img src="${detailed.img}" alt="图片加载失败"></div>
                                <div>商品名称：${detailed.goods_name}</div>
                                <div>商品价格：${detailed.price}元</div>
                                <div>商品库存：${detailed.stock}</div>
                                <div>商品销量：${detailed.sold}</div>
                                <div>商品上架时间：${detailed.created_at}</div>
                                <div>商品更新时间：${detailed.updated_at}</div>

                                `;
                    $("#detailed").html(html);
                },
            });
            // 显示div和幕布
            $("#detailed").show();
            $("#curtain").show();
        }

        //隐藏幕布、div等
        function curtain() {
            $("#curtain").hide();
            $("#detailed").hide();
            $("#box").hide();
            $("#name").val("");
            $("#stock").val("");
            $("#price").val("");
            $("#sold").val("");
            num = 1;
        }
        //搜索事件
        function search() {
            //请求连接
            $.ajax({
                type: "POST",
                url: "https://liu.zzgoodqc.cn/goods/search",
                data: {
                    goods_name: $("#search").val(),
                },
                // 渲染页面
                success: function (res) {
                    let data = JSON.parse(res);
                    arrData = data.data;
                    console.log(arrData);
                    //等于空的话就调用分页渲染页面
                    if ($("#search").val() == "") {
                        Pagination();
                        pagey();
                        return;
                    }
                    pagey(arrData);
                },
            });
        }

        // 储存按照什么排序
        var types = null;
        var sortNum = 0;
        var sorts = null;
        //排序
        function productSort(n) {
            sortNum++;
            if (sortNum == 1) {
                sorts = "asc ";
            } else if (sortNum == 2) {
                sorts = "desc";
            } else if (sortNum == 3) {
                Pagination();
                sortNum = 0;
                return;
            }
            // 修改分页方式
            numss = "false";
            //判断按照什么分页并进行储存
            if (n == 1) {
                types = "price";
            } else if (n == 2) {
                types = "stock";
            } else if (n == 3) {
                types = "sold";
            }
            ///请求连接
            $.ajax({
                type: "GET",
                url: `https://liu.zzgoodqc.cn/goods/sort?sort=${sorts}&type=${types}&page=${pages}&limit=${limits}`,
                //页面渲染
                success: function (res) {
                    let data = JSON.parse(res);
                    arrData = data.data;
                    pagey(arrData);
                    $("i").html(pages);
                },
            });
        }
    </script>
    <style>
        #box {
            width: 500px;
            height: 280px;
            border: 1px solid #000;
            margin: auto;
            position: absolute;
            top: 3%;
            left: 37%;
            background-color: #fff;
            z-index: 888;
            border-radius: 10px;
            display: none;
        }
        .layui-input {
            width: 350px;
        }
        #detailed {
            background-color: #fff;
            position: absolute;
            top: 20%;
            left: 40%;
            width: 350px;
            height: 500px;
            z-index: 999;
            display: none;
            border-radius: 10px;
        }
        #detailed div {
            font-size: 20px;
            padding: 5px;
        }
        #curtain {
            position: absolute;
            top: 0px;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none;
        }

        img {
            width: 150px;
            height: 70px;
        }
    </style>
</html>
